<template>
    <!-- 自定义弹窗 -->
    <view class="_showModal" v-show="show">
        <view class="_shade"></view>
        <view class="_modalBox">
            <view class="_modal">
                <view class="tip">登录提示</view>
                <view class="desc">您还未登录，请登录后再进行操作</view>
                <view class="goLogin" @click.stop="clickBtn('confirm')">立即登录</view>
                <uni-icons @click="clickBtn('cancel')" class="icon close" type="closeempty" size="40"></uni-icons>
                <!--  <slot name="btn">
            <view class="btnbox">
              <view v-if="cancelText" class="btn" :style="{color:cancelColor,background:cancelBackgroundColor}" @click.stop="clickBtn('cancel')">{{cancelText}}</view>
              <view class="btn" :style="{color:confirmColor,background:confirmBackgroundColor}" @click.stop="clickBtn('confirm')">{{confirmText}}</view>
            </view>
          </slot> -->
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: "show-modal",
    computed: {
        show() {
            return this.$modalStore.state.show
        },
    },
    methods: {
        closeModal() {
            this.$modalStore.commit("hideModal")
        },
        clickBtn(res) {
            this.$modalStore.commit("hideModal")
            if (res == "confirm") {
                let url = "/pages/login/loading?goLogin=true"
                uni.reLaunch({
                    url: url,
                })
            }
        },
    },
    beforeDestroy() {
        this.$modalStore.commit("hideModal")
    },
    data() {
        return {}
    },
}
</script>

<style lang="scss" scoped>
._showModal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    ._shade {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: #000;
        opacity: 0.6;
        z-index: 11000;
    }
    ._modalBox {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 12000;
        display: flex;
        justify-content: center;
        align-items: center;
        ._modal {
            flex: none;
            width: 570rpx;
            height: 386rpx;
            background: #ffffff;
            border-radius: 24rpx;
            position: relative;
            text-align: center;
            .tip {
                font-size: 34rpx;
                font-weight: bold;
                color: #333333;
                padding: 48rpx 0 56rpx 0;
            }
            .desc {
                font-size: 30rpx;
                color: #666666;
                padding-bottom: 56rpx;
            }
            .goLogin {
                width: 466rpx;
                height: 80rpx;
                line-height: 80rpx;
                text-align: center;
                color: #ffffff;
                background: $app-color-main;
                border-radius: 40rpx;
                font-size: 30rpx;
                margin-left: 52rpx;
            }
            .close {
                color: #999;
                position: absolute;
                top: 36rpx;
                right: 40rpx;
            }
        }
    }
}
</style>
